﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分页</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script>
        let currentPage = 1;
        let pageSize = 6;

        window.onload = function () {
            initData(currentPage, pageSize);
        }

        function initData(page, size) {
            $.ajax({
                url: "allGoods",
                type: "GET",
                data: {
                    page: page,
                    size: size
                },
                dataType: "json",
                success: function (res) {
                    if (res.code === 200) {
                        let data_temp = res.data;

                        if (data_temp.length === 0 && page > 1) {
                            alert("已经是最后一页");
                            return;
                        }

                        currentPage = page;
                        $("#tb").empty();
                        $("#tdbar").empty();

                        for (let i = 0; i < data_temp.length; i++) {
                            let row = "<tr>" +
                                "<td>" + data_temp[i].id + "</td>" +
                                "<td>" + data_temp[i].title + "</td>" +
                                "<td>" + data_temp[i].price + "</td>" +
                                "<td>" + data_temp[i].descr + "</td>" +
                                "<td><img src='" + data_temp[i].img + "' style='width: 50px'></td>" +
                                "<td>" + (data_temp[i].state == 0 ? '可销售' : '不可销售') + "</td>" +
                                "<td>对外经贸</td>" +
                                "<td>" +
                                "<button class='btn btn-warning' onclick='editGood("+ data_temp[i].id + ")'>编辑</button> " +
                                "<button class='btn btn-danger' onclick='delRow(" + data_temp[i].id + "," + page + ")'>删除</button>" +
                                "</td>" +
                                "</tr>";
                            $("#tb").append(row);
                        }

                        let firstBtn = "<button class='btn btn-success' onclick='initData(1," + size + ")'>首页</button>&nbsp;";
                        let prevPage = page > 1 ? page - 1 : 1;
                        let prevBtn = "<button class='btn btn-success' onclick='initData(" + prevPage + "," + size + ")'>上一页</button>&nbsp;";
                        let nextBtn = "<button class='btn btn-success' onclick='initData(" + (page + 1) + "," + size + ")'>下一页</button>&nbsp;";
                        let lastBtn = "<button class='btn btn-success' onclick='goLastPage(" + size + ")'>尾页</button>";

                        $("#tdbar").append(firstBtn + prevBtn + nextBtn + lastBtn);
                    }
                },
                error: function (xhr, status, error) {
                    console.error("请求失败:", error);
                }
            });
        }

        function editGood(id) {
            window.location.href = "editGood.html?id=" + id;  // 跳转到编辑页面并传递商品ID
        }


        function goLastPage(size) {
            let tryPage = currentPage + 1;
            function tryFetch(pageNum) {
                $.ajax({
                    url: "allGoods",
                    type: "GET",
                    data: {
                        page: pageNum,
                        size: size
                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 200 && res.data.length > 0) {
                            tryPage++;
                            tryFetch(tryPage);
                        } else {
                            initData(tryPage - 1, size);
                        }
                    }
                });
            }
            tryFetch(tryPage);
        }

        function delRow(id, page) {
            let anw = window.confirm('你确定要删除该条数据吗');
            if (anw) {
                $.ajax({
                    url: "delGood",
                    type: "POST",
                    data: {
                        id: id,
                        page: page,
                    },
                    dataType: "text",
                    success: function (res) {
                        if (res === 'Y') {
                            alert('删除数据成功');
                            initData(page, pageSize);
                        } else {
                            alert("删除失败");
                        }
                    }
                });
            } else {
                return;
            }
        }
    </script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">商品搜索</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入关键字" oninput="queryData(this.value)">
                </div>
            </form>
        </div>
    </div>
</nav>

<table class="table table-striped table-bordered table-hover table-condensed">
    <thead>
    <tr>
        <th>#</th>
        <th>商品名字</th>
        <th>价格</th>
        <th>描述</th>
        <th>图片</th>
        <th>状态</th>
        <th>商家</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tb"></tbody>
    <tfoot>
    <tr>
        <td colspan="8" style="text-align: center" id="tdbar"></td>
    </tr>
    </tfoot>
</table>
</body>
</html>

<script>
    function queryData(keywords) {
        if (!keywords.trim()) {
            // 如果关键词为空，显示分页的所有数据
            initData(currentPage, pageSize);
            return;
        }
        $.ajax({
            url: "queryByCondition",
            type: "GET",
            data: {
                keywords: keywords
            },
            dataType: "text",
            success: function (res) {
                let data = JSON.parse(res);
                if (data.code === 200) {
                    let data_temp = data.data;  // ✅ 增加这行定义
                    $("#tb").empty();
                    $("#tdbar").empty();

                    for (let i = 0; i < data_temp.length; i++) {
                        let row = "<tr>" +
                            "<td>" + data_temp[i].id + "</td>" +
                            "<td>" + data_temp[i].title + "</td>" +
                            "<td>" + data_temp[i].price + "</td>" +
                            "<td>" + data_temp[i].descr + "</td>" +
                            "<td><img src='" + data_temp[i].img + "' style='width: 50px'></td>" +
                            "<td>" + (data_temp[i].state == 0 ? '可销售' : '不可销售') + "</td>" +
                            "<td>对外经贸</td>" +
                            "<td>" +
                            "<button class='btn btn-warning'>编辑</button> " +
                            "<button class='btn btn-danger'>删除</button>" +
                            "</td>" +
                            "</tr>";
                        $("#tb").append(row);
                    }
                }
            }
        });
    }
</script>
